<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
    <link rel="stylesheet" href="https://www.kdniao.com/OutDemo/KDNWidget/KDNWidget.css"/>
</head>

<body>
<div id="app">
    <el-container v-loading="loading">
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>收货单管理</el-breadcrumb-item>
                <el-breadcrumb-item>编辑收货信息</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>

        <el-main>
            <el-form ref="receiptForm" :model="receiptForm" :rules="rule" label-width="20%">
                <el-row>
                    <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
                        <el-form-item label="收货单号">
                            <el-input :disabled="true" v-model="receiptForm.orderBill_id"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            <#--<el-row>-->
            <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
            <#--<el-form-item label="收货单名称">-->
            <#--<el-input v-model="receiptForm.order_name"></el-input>-->
            <#--</el-form-item>-->
            <#--</el-col>-->
            <#--</el-row>-->
                <el-row>
                    <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
                        <el-form-item label="收货人" prop="consignee_name">
                            <el-input v-model="receiptForm.consignee_name" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
                        <el-form-item label="验收日期">
                            <el-date-picker
                                    v-model="receiptForm.crtTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="验收日期" style="width: 100%"
                            <#--:picker-options="pickerOptions"-->
                            <#--:disabled="true"-->
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
                        <el-form-item label="本次收货金额" prop="price">
                            <el-input v-model="price" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
                        <el-form-item label="描述">
                            <el-input v-model="receiptForm.remark" type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
                        <el-form-item label="图片" prop="sku_pic_url">
                            <el-upload class="upload-demo"
                                       action="/order/file.json"
                                       list-type="picture-card"
                                       accept=".jpeg,.png,.gif,.jpg" :before-upload="beforeAvatarUpload"
                                       :file-list="attachmentArr"
                                       multiple :limit="100"
                                       :on-change="handChange"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>

                </el-row>
                <br>
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="物流信息" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                    <div id="wuliu"></div>
                </el-row>
                <br>
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="收单明细" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                </el-row>
                <br>
                <el-table :data="receiptForm.context"
                          class="tb-edit"
                          style="width: 100%" highlight-current-row @row-click="handleCurrentChange" size="mini"
                          tooltip-effect="dark" border>
                    <el-table-column label="序号"
                                     type="index"
                                     width="50">
                    </el-table-column>
                    <el-table-column label="发货单编码" prop="orderBill_id" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.orderBill_id" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="材料编码" prop="sku_code" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sku_code" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="材料名称" prop="sku_name" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sku_name" v-model="scope.row.sku_brand"-->
                    <#--:disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="品牌" prop="sku_brand" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sku_brand" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="单位" prop="sku_unit" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sku_unit" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="型号" prop="sku_model" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sku_unit" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="规格参数" prop="sku_slug_set" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sku_model" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                <#--<el-table-column label="属性" prop="sku_slug" :show-overflow-tooltip=true>-->
                <#--<template scope="scope">-->
                <#--<el-input size="small" v-model="scope.row.sku_slug" :disabled="true"></el-input>-->
                <#--</template>-->
                <#--</el-table-column>-->
                    <el-table-column label="单价" prop="sku_contract_price" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sku_price" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="预计到货时间" prop="arriveTime" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sku_price" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="备注" prop="sku_remark" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sku_price" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="应收数量" prop="purNum" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.purNum" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="本次收货">
                        <template scope="scope">
                            <el-input size="small" v-model="scope.row.sendNum" placeholder="请输入数量"
                                      @change="handleEdit(scope.$index, scope.row)"
                                      onkeyup="this.value=this.value.replace(/\D/g,'')"
                                      onafterpaste="this.value=this.value.replace(/\D/g,'')"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="收货备注" prop="receiving_remark" :show-overflow-tooltip=true>
                        <template scope="scope">
                            <el-input v-model="scope.row.receiving_remark" size="mini"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
                <br>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('receiptForm')">确认</el-button>
                    <a href="/order/dispatch.page">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer>

        </el-footer>
    </el-container>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script src="/js/KDNWidget.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                attachmentArr: [],
                receiptForm: {
                    // surface_id: '',
                    // order_name: '',
                    // consignee_name: '',
                    // consignee_address:'',
                    // project_name: '',
                    // supply_user: '',
                    // supply_userId: '',
                    // crtTime: '',
                    // price: 0,
                    // user_id: '',
                    // userGroup_id: '',
                    // remark: '',
                    // context: [],
                    // orderBill_flow: 20,
                    // type: 'analog',
                    // orderBill_id: '',
                    // attachment: '',
                },
                attachment: [],
                rule: {
                    consignee_name: [{
                        required: true,
                        message: '请输入收货人姓名',
                        trigger: 'blur',
                    }],
                    price: [{
                        required: true,
                        message: '请输入正确的金额',
                        trigger: 'blur',
                    }],
                },
                //当前页
                currentPage: 1,
                //每页数量
                pagesize: 10,
                //总页数
                total: "",
                checkValue: '',
            };
        },
        //实时计算
        computed: {
            //计算商品总额
            price() {
                let sumPrice = 0;
                this.receiptForm.context.forEach((item) => {
                    sumPrice += Number(item.sku_contract_price) * Number(item.sendNum);
                });
                let price = Number(sumPrice).toFixed(2);
                this.receiptForm.price = price;
                return price;
            },
        },
        methods: {
            handChange(file, fileList) {
                this.attachmentArr = fileList;
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isLt2M) {
                    this.$message.error('文件大小不能超过 2MB!');
                }
                return isLt2M;
            },
            open() {
                this.$alert('系统异常点击确定返回列表页。', '信息框', {
                    confirmButtonText: '确定',
                    showClose: false,
                    callback: action => {
                        window.history.back(-1);
                    }
                });
            },
            handleSizeChange(val) {
                this.pagesize = val;
            },
            CurrentChange(val) {
                this.currentPage = val;
            },
            handleCurrentChange(row, event, column) {
                console.log(row, event, column, event.currentTarget)
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            submitForm(formName) {
                this.loading = true;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (Number.isNaN(this.receiptForm.price)) {
                            this.$message.error('收货金额必须为数字！');
                            this.loading = false;
                            return false;
                        }
                        if (this.receiptForm.crtTime === null) {
                            this.$message.error('请选择收货时间！');
                            this.loading = false;
                            return false;
                        }
                        if (this.attachmentArr.length == 0) {
                            this.$message.error('请上传附件！');
                            return false;
                        } else {
                            this.receiptForm.attachment = "";
                            this.attachmentArr.forEach((ele) => {
                                if (ele.status == "success") {
                                    ele.response = "https://pinzafile.oss-cn-shanghai.aliyuncs.com/" + ele.response;
                                    this.receiptForm.attachment += ele.response + ",";
                                } else {
                                    this.receiptForm.attachment += ele.url + ",";
                                }
                            })
                        }
                        // this.receiptForm.attachment = this.receiptForm.attachment.toString();
                        var tempForm = this.receiptForm;
                        console.log(tempForm);
                        // console.log(typeof this.receiptForm.attachment);
                        var formData = JSON.stringify(tempForm);
                        $.ajax({
                            url: '/order/editConsignee.json',
                            type: 'POST',
                            data: {formData: formData},
                            // contentType: "application/json",
                            // async: false,
                            dataType: 'json',
                            success: (result) => {
                                console.log(result);
                                this.loading = false;
                                if (result.ret) {
                                    this.$message({
                                        message: '操作成功',
                                        type: 'success'
                                    });
                                    setTimeout(function () {
                                        window.location.href = "/order/consignee.page";
                                    }, 1000);
                                } else {
                                    this.$message.error("编辑失败，请稍后重试。");
                                }
                            }
                        });
                    } else {
                        this.$message.error('请检查表单内容');
                        this.loading = false;
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            ajaxFunction(orderNo) {
                var resultData = {};
                var bool = false;
                $.ajax({
                    url: '/order/billDetail.json',
                    type: 'POST',
                    data: {orderNo: orderNo, type: 23},
                    // contentType: "application/json",
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        console.log(result);
                        if (result.ret) {
                            bool = true;
                            resultData = result.data;//数据记录
                        }
                    }
                });
                if (bool) {
                    this.showDetailMsg(resultData);
                } else {
                    this.open();
                }
            },
            showDetailMsg(resultData) {
                this.receiptForm = resultData;
                this.receiptForm.order_name = resultData.order_name;
                this.receiptForm.surface_id = resultData.surface_id;
                // this.receiptForm.consignee_name = resultData.consignee_name;
                this.receiptForm.transport_company = resultData.transport_company;
                this.receiptForm.transport_billNo = resultData.transport_billNo;
                this.receiptForm.supply_user = resultData.supply_user;
                this.receiptForm.project_name = resultData.project_name;
                this.receiptForm.consignee_information = resultData.consignee_information;
                this.receiptForm.consignee_address = resultData.consignee_address;
                this.receiptForm.supply_userId = resultData.supply_userId;
                this.receiptForm.price = resultData.price;
                this.receiptForm.user_id = resultData.user_id;
                this.receiptForm.userGroup_id = resultData.userGroup_id;
                var att = this.receiptForm.attachment.substr(0, this.receiptForm.attachment.length);
                att.split(",").forEach((ele) => {
                    if (!ele == "") {
                        var obj = {
                            name: "",
                            url: "",
                            status: "fail"
                        }
                        obj.url = ele;
                        this.attachmentArr.push(obj);
                    }
                })
                if (resultData.remark === 'null') {
                    this.receiptForm.remark = '无';
                } else {
                    this.receiptForm.remark = resultData.remark;
                }
                this.receiptForm.orderBill_id = resultData.orderBill_id;
                var orderDetailList = resultData.context;
                var arr_table = [];
                for (var i = 0; i < orderDetailList.length; i++) {
                    orderDetailList[i].orderBill_id = resultData.orderBill_id;
                    arr_table.push(orderDetailList[i])
                }
                this.receiptForm.context = arr_table;
                var transport_company = this.receiptForm.transport_company;
                var transport_billNo = this.receiptForm.transport_billNo;
                var json = "";
                var boolean = false;
                if (transport_billNo != "") {
                    $.ajax({
                        url: '/order/logistics.json',
                        type: 'get',
                        data: {no: transport_billNo},
                        // contentType: "application/json",
                        async: false,
                        dataType: 'json',
                        success: function (result) {
                            if (result.ret) {
                                boolean = result.ret;
                                json = result.data;
                            }
                        }
                    });
                    if (boolean) {
                        transport_company = json;
                    }
                }
                window.onload = function () {
                    KDNWidget.run({
                        serviceType: "B",
                        expCode: transport_company,
                        expNo: transport_billNo,
                        showType: "normal",
                        container: "wuliu"
                    })
                }
            }
        },
        /** 初始化参数的时候使用 */
        mounted() {
            var orderNo = "${orderBill_id}";
            this.ajaxFunction(orderNo);
        }
    })
</script>
<script>

</script>
</body>

</html>